<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2025/3/4
  Time: 11:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        #userTable {
            width: 800px;
            margin: 0 auto;
        }

        p {
            text-align: center;
        }


        #box {
            /*浮动盒子模型*/
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    </style>
<%--
http://localhost:8080/demo0311_Web_exploded/user
http://localhost:8080/static/layui/css/layui.css

在部署时需要删除/ 后面内容，以下是最新项目访问路径
http://localhost:8080/user

--%>
</head>
<body>
<p>
    <a href="add.jsp" class="layui-btn layui-bg-blue">新增用户</a>
    <%-- jstl标签以及el表达式  --%>
    用户表有${count}条记录
</p>
<div class="layui-form" id="box">
    <div class="layui-input-inline layui-input-wrap">
        <input type="input" id="username" name="username" autocomplete="off" lay-affix="clear" class="layui-input">
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <div class="layui-input-inline layui-input-wrap">
        <select name="sex" id="sex">
            <option value="" selected>请选择性别</option>
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <div class="layui-input-inline layui-input-wrap">
        <select name="deptId" id="deptId">
            <option value="0" selected>请选择部门</option>
            <%--   实现动态查询部门         --%>
            <c:forEach items="${deptList}" var="dept">
                <option value="${dept.id}">${dept.dname}</option>
            </c:forEach>
        </select>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" class="layui-btn" onclick="search()">查询</button>
</div>
<hr>
<table id="userTable" class="layui-table" lay-even>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>出生日期</td>
        <td>部门名称</td>
        <td>操作</td>
    </tr>
    <c:forEach items="${userList}" var="user">
        <tr>
            <td>${user.id}</td>
            <td>${user.username}</td>
            <td>${user.sex}</td>
            <td><fmt:formatDate value="${user.birthday}"></fmt:formatDate></td>
            <td>${user.dept.dname}</td>
            <td>
                <a class="layui-btn layui-btn-primary" href="toEditUser?id=${user.id}">编辑</a>&nbsp;&nbsp;
                <a class="layui-btn layui-btn-danger" href="javascript:void(0)" onclick="deleteUser(${user.id})">删除</a>
            </td>
        </tr>
    </c:forEach>
</table>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(function(){
        var layer = layui.layer;

    });
    function deleteUser(id) {
        // Welcome
        layer.confirm('是否删除这个用户信息？', {icon: 3}, function(){
            location.href = "deleteUser?id="+id;
        }, function(){
        });
    }

    function search(){
        //通过原生dom操作获取两个条件的值
        var username = document.getElementById("username").value;
        var sex = document.getElementById("sex").value;

        var deptId = document.getElementById("deptId").value;
        //console.log(username+'----'+sex)
        location.href = "/user?username="+username+"&sex="+sex+"&deptId="+deptId;
    }
</script>
</body>
</html>
